<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../src/css/scojs.css" rel="stylesheet">
    <link href="../src/css/colpick.css" rel="stylesheet">
    <link href="../src/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../src/css/main.css">
    <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css">-->
</head>
<body>
<div id="danmup" style="left: 50%;margin-left:-400px;top:100px">


</div>

<div style="display: none">
    <span class="glyphicon" aria-hidden="true">&#xe072</span>
    <span class="glyphicon" aria-hidden="true">&#xe073</span>
    <span class="glyphicon" aria-hidden="true">&#xe242</span>
    <span class="glyphicon" aria-hidden="true">&#xe115</span>
    <span class="glyphicon" aria-hidden="true">&#xe111</span>
    <span class="glyphicon" aria-hidden="true">&#xe096</span>
    <span class="glyphicon" aria-hidden="true">&#xe097</span>
</div>


</body>
<script src="../src/js/jquery-2.1.4.min.js"></script>
<script src="../src/js/jquery.shCircleLoader.js"></script>
<script src="../src/js/sco.tooltip.js"></script>
<script src="../src/js/colpick.js"></script>
<script src="../src/js/jquery.danmu.js"></script>
<script src="../src/js/main.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
    /* WebSocket */
    var wsServer = 'ws://127.0.0.1:9502';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt) {
        console.log("Connected to WebSocket server.");
        $('#danmu .danmu-div').danmu('danmuResume');
    };

    websocket.onclose = function (evt) {
        console.log("Disconnected");
    };

    websocket.onmessage = function (evt) {
        console.log('Retrieved data from server: ' + evt.data);
        var time = $('#danmup').data('nowTime') + 1;
        var new_obj = eval('(' + evt.data + ')');
        $('#danmup .danmu-div').danmu("addDanmu", new_obj);//添加弹幕
    };

    websocket.onerror = function (evt, e) {
        console.log('Error occured: ' + evt.data);
    };


    $("#danmup").DanmuPlayer({
        src: "level5.mp4",
        height: "480px", //区域的高度
        width: "800px" //区域的宽度
        , urlToGetDanmu: ""
        , urlToPostDanmu: ""
    });

    $("#danmup .danmu-div").danmu("addDanmu", [
        {"text": "这是滚动弹幕", color: "white", size: 1, position: 0, time: 2}
        , {"text": "我是帽子绿", color: "green", size: 1, position: 0, time: 3}
        , {"text": "哈哈哈啊哈", color: "black", size: 1, position: 0, time: 10}
        , {"text": "这是顶部弹幕", color: "yellow", size: 1, position: 1, time: 3}
        , {"text": "这是底部弹幕", color: "red", size: 1, position: 2, time: 9}
        , {"text": "大家好，我是伊藤橙", color: "orange", size: 1, position: 1, time: 3}
    ]);
</script>
</html>